﻿<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1, user-scalable=no">
    <script>
      var deviceWidth = Math.min(1136, Math.min(window.innerWidth, document.documentElement.clientWidth));
      document.documentElement.dataset.dpr = window.devicePixelRatio
      document.documentElement.style.fontSize = deviceWidth / 11.36 + 'px'
    </script>
    <style>
      html {
        width: 100%;
        height: 100%;
      }
      
      body {
        width: 11.36rem;
        height: 100%;
        margin: 0 auto;
        padding: 0;
        background: url(/Mobile/Img/shop/container-bg.png) no-repeat center fixed/100% 100%;
        font-family: 'Microsoft Yahei';
      }
      
      ul,
      li {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      
      .ui-content {
        width: 11.36rem;
        height: 100%;
      }
      
      .ui-goods-list {
        width: 8.8rem;
        margin: 0.68rem auto 0;
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
      }
      
      .ui-goods-list li {
        width: 2.6rem;
        height: 2.35rem;
        display: inline-block;
        margin-bottom: .5rem;
      }
      
      .ui-goods-showcase {
        position: relative;
        width: 2.6rem;
        height: 2.35rem;
        background: url(/Mobile/Img/shop/goods-box-bg.png) no-repeat center/100% 100%;
        text-align: center;
      }
      
      .ui-goods-showcase > span {
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: white;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        margin: 0 auto;
        padding-top: .05rem;
      }
      
      .ui-goods-pic {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 1.74rem;
        height: 0.95rem;
      }
      
      .ui-goods-pic > img {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
      }
      
      .ui-goods-showcase > p {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 13px;
        line-height: 1;
        text-align: center;
        height: auto;
        margin: 0 0 .15rem 0;
      }
      
      .ui-goods-showcase > p i {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
      
      .ui-goods-showcase p > img {
        width: 0.4rem;
        display: inline-block;
        vertical-align: middle;
        margin: 0 0.15rem 0 0;
      }
      
      .ui-goods-showcase p > span {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        color: #fff;
      }
      
      @media screen and (max-width: 536px) {
        .ui-goods-showcase > span {
          font-size: 12px;
          padding: 0;
        }
        .ui-goods-list {
          margin: 0.8rem auto 0;
        }
        .ui-goods-list li {
          margin-bottom: 0.8rem;
        }
        .ui-goods-showcase p > span {
          font-size: 12px;
        }
      }
      
      @media screen and (min-width: 1000px) {
        .ui-goods-showcase > span {
          font-size: 18px;
          font-weight: bold;
        }
        .ui-goods-list {
          margin: 1.6rem auto 0;
        }
        .ui-goods-list li {
          margin-bottom: 1.2rem;
        }
        .ui-goods-showcase p > span {
          font-size: 16px;
        }
      }
      
      @media screen and (min-width: 1366px) {
        .ui-goods-showcase > span {
          font-size: 20px;
          font-weight: bold;
        }
        .ui-goods-list {
          width: 10rem;
          margin: 2rem auto 0;
        }
        .ui-goods-list li {
          margin-bottom: 1.6rem;
        }
        .ui-goods-showcase p > span {
          font-size: 18px;
        }
      }

    </style>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <div class="ui-content">
      <ul class="ui-goods-list fn-clear">
        <li>
          <div class="ui-goods-showcase">
            <span>50元电信充值卡</span>
            <a href="Buy.aspx?param=1" class="ui-goods-pic">
              <img src="http://imagery.webfox.com/match/330.jpg">
            </a>
            <p>
              <i></i> <img src="../Image/2.png"><span>5000</span>
            </p>
          </div>
        </li>
        <li>
          <div class="ui-goods-showcase">
            <span>50元电信充值卡</span>
            <a href="Buy.aspx?param=1" class="ui-goods-pic">
              <img src="http://imagery.webfox.com/match/330.jpg">
            </a>
            <p>
              <i></i> <img src="../Image/2.png"><span>5000</span>
            </p>
          </div>
        </li>
        <li>
          <div class="ui-goods-showcase">
            <span>50元电信充值卡</span>
            <a href="Buy.aspx?param=1" class="ui-goods-pic">
              <img src="http://imagery.webfox.com/match/330.jpg">
            </a>
            <p>
              <i></i> <img src="../Image/2.png"><span>5000</span>
            </p>
          </div>
        </li>
        <li>
          <div class="ui-goods-showcase">
            <span>50元电信充值卡</span>
            <a href="Buy.aspx?param=1" class="ui-goods-pic">
              <img src="http://imagery.webfox.com/match/330.jpg">
            </a>
            <p>
              <i></i> <img src="../Image/2.png"><span>5000</span>
            </p>
          </div>
        </li>
        <li>
          <div class="ui-goods-showcase">
            <span>50元电信充值卡</span>
            <a href="Buy.aspx?param=1" class="ui-goods-pic">
              <img src="http://imagery.webfox.com/match/330.jpg">
            </a>
            <p>
              <i></i> <img src="../Image/2.png"><span>5000</span>
            </p>
          </div>
        </li>
        <li>
          <div class="ui-goods-showcase">
            <span>50元电信充值卡</span>
            <a href="Buy.aspx?param=1" class="ui-goods-pic">
              <img src="http://imagery.webfox.com/match/330.jpg">
            </a>
            <p>
              <i></i> <img src="../Image/2.png"><span>5000</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </body>

</html>
